<template>
  <div class="dn-container">
    <div class="main_body">
      <div class="main_left">
        <div class="btn_group">
          <div @click="addfroms(data)" class="btn_item" v-for="(data, i) in btnlist" :key="i">
            <i :class="data.icon"></i>
            <span>{{ data.name }}</span>
          </div>
        </div>
      </div>
      <div class="phone-area" ref="copyDom">
        <div class="scroll-body">
          <div class="page-content">
            <div class="row relative w840">
              <div class="diy-phone">
                <div class="phone-body">
                  <div class="phone-title goods">
                    <div class="phone-top">
                      <div class="custom-navbar" style="width: 375px; height: 64px; background: rgb(255, 255, 255);">
                        <img
                          src=""
                          alt=""
                          style="width: 375px; height: 20px; position: absolute; top: 0px; left: 0px; z-index: 100;"
                        />
                        <img
                          src=""
                          alt=""
                        />
                      </div>
                    </div>
                    <p class="page-title" style="color: rgb(33, 33, 33);">猜你喜欢</p>
                  </div>
                  <div class="phone-main">
                    <draggable element="div" v-bind="dragOptions" v-model="list">
                      <div
                        @click="handleChange(i)"
                        v-for="(item, i) in list"
                        :key="i"
                        class="drag-item"
                        v-bind:class="{
                          'active-item': item.active && !hideline
                        }"
                      >
                        <guesslike :data="item"></guesslike>
                        <el-popover placement="top" width="160" v-model="item.visible">
                          <p>确定删除吗？</p>
                          <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                            <el-button type="primary" size="mini" @click.stop="delhandle(i)">确定</el-button>
                          </div>
                          <span slot="reference" class="del">删除</span>
                        </el-popover>
                        <i class="left-border border"></i>
                        <i class="right-border border"></i>
                      </div>
                    </draggable>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="component-setter">
        <div class="setter-body">
          <el-form label-width="100px" :model="obj" :rules="rules" ref="ruleForm">
            <div class="header">基本设置</div>
            <el-form-item label="是否启用">
              <el-radio-group v-model="is_open">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="显示页面:" prop="checkedCities">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <el-checkbox-group v-model="obj.checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="(item, i) in cities" :label="item.value" :key="i">{{ item.label }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <template v-if="data && data.params">
              <div class="header">标签设置</div>
              <div class="title">{{ data.name }}</div>
              <div v-if="data.template_type == 'titleBar'">
                <el-form-item label="内容:"><el-input size="medium" style="width: 300px;" v-model="data.params.title"></el-input></el-form-item>
                <el-form-item label="颜色:"><el-color-picker v-model="data.params.bar_color"></el-color-picker></el-form-item>
                <el-form-item label="图标:">
                  <div class="icon_box">
                    <span class="hasIcon" v-show="data.params.icon != ''">
                      <i :class="data.params.icon + ' iconfont'"></i>
                      <i class="icon-abl-close el-icon-error" @click="removeIcon"></i>
                      <span class="choose_bar" @click="chooseIcon('icon')"><i class="txt">替换</i></span>
                    </span>
                    <span class="noIcon" v-show="data.params.icon == ''"><i class="el-icon-plus" @click="chooseIcon('icon')"></i></span>
                  </div>
                </el-form-item>
              </div>
              <div v-if="data.template_type == 'shangpinzu'" style="padding:0 20px">
                <el-collapse v-model="activeNames">
                  <el-collapse-item title="全局组件" name="1">
                    <div>
                      <el-form size="medium" label-width="100px">
                        <el-form-item label="显示类型">
                          <el-radio-group size="medium" v-model="data.params.show_type">
                            <el-radio label="block">普通</el-radio>
                            <el-radio :disabled="data.params.list_type == 'list'" label="scroll">左右滑动</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="列表类型">
                          <el-radio-group size="medium" v-model="data.params.list_type">
                            <el-radio label="two">双列</el-radio>
                            <el-radio label="three">三列</el-radio>
                            <el-radio :disabled="data.params.show_type == 'scroll'" label="list">列表</el-radio>
                            <el-radio label="one">单列</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="背景颜色"><ColorPicker :color="data.params" :name="'bg'"></ColorPicker></el-form-item>
                      </el-form>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="商品设置" name="2">
                    <el-form size="medium" label-width="100px">
                      <el-form-item label="推荐模式">
                        <el-radio-group size="medium" v-model="data.params.recommend_type">
                          <!-- <el-radio :label="0">自动推荐</el-radio> -->
                          <el-radio :label="1">自定义推荐</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item v-if="data.params.recommend_type == 1" label="选择商品" label-width="100px">
                        <el-radio-group style="line-height: 30px; vertical-align: text-top" v-model="data.params.type" @change="changeLimit">
                          <el-radio :label="0">手动选择</el-radio>
                          <el-radio :label="1">选择分类</el-radio>
                        </el-radio-group>
                        <div class="input_content" v-show="data.params.type == 3">
                          <el-radio-group>
                            <el-radio :label="'new'">新品商品</el-radio>
                            <el-radio :label="'hot'">热卖商品</el-radio>
                            <el-radio :label="'recommend'">推荐商品</el-radio>
                          </el-radio-group>
                        </div>
                      </el-form-item>
                    </el-form>

                    <div class="proSelect" v-if="data.params.type != 3 && data.params.recommend_type == 1">
                      <div class="phead">
                        <div class="name">商品</div>
                        <div class="price">价格</div>
                        <div class="action">操作</div>
                      </div>
                      <ul>
                        <draggable element="ul" v-model="data.list" :animation="500">
                          <li v-for="(item, i) in data.params.list.slice(0, data.limit)" :key="i">
                            <div class="dragIcon"><i class="el-icon-d-caret"></i></div>
                            <div class="pro">
                              <vimage style="width: 40px; height: 40px" :src="item.master" fit="fit"></vimage>
                              <div class="txt">
                                <span class="mark" v-if="item.type == 0">实</span>
                                {{ item.name }}
                              </div>
                            </div>
                            <div class="price">￥{{ item.sell_price }}</div>
                            <div class="action"><el-button type="text" @click="removePro(i)">删除</el-button></div>
                          </li>
                        </draggable>
                        <li class="addPro" v-if="data.params.type == 0" @click="addPro"><el-button type="text">添加产品</el-button></li>
                        <li class="addPro" v-if="data.params.type == 1" @click="addCate"><el-button type="text">选择分类</el-button></li>
                      </ul>
                    </div>
                    <el-form size="medium" label-width="100px">
                      <el-form-item label="显示数量">
                        <div class="slider_box_num">
                          <el-slider class="slider_item" :min="1" :max="20" v-model="data.params.limit" @change="changeLimit"></el-slider>
                          <el-input-number v-model="data.params.limit" :controls="true" :min="0" :max="20">
                            <template slot="append">
                              .com
                            </template>
                          </el-input-number>
                        </div>
                      </el-form-item>

                      <el-form-item label="商品排序" v-show="data.params.type != 0 && data.params.recommend_type == 1">
                        <el-radio-group v-model="data.params.order">
                          <el-radio :label="'comprehensive'">综合</el-radio>
                          <el-radio :label="'sellNum'">按销量</el-radio>
                          <el-radio :label="'priceDesc'">价格降序</el-radio>
                          <el-radio :label="'priceAsc'">价格升序</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-form>
                  </el-collapse-item>
                  <el-collapse-item title="内容样式" name="3">
                    <el-form size="medium" label-width="100px">
                      <el-form-item label="商品标题"><ColorPicker :color="data.params" :name="'t_color'"></ColorPicker></el-form-item>
                      <el-form-item label="商品售卖价">
                        <el-radio-group v-model="data.params.pro_price.show">
                          <el-radio :label="1">显示</el-radio>
                          <el-radio :label="0">不显示</el-radio>
                        </el-radio-group>
                        <div class="input_content"><ColorPicker v-if="data.params.pro_price.show" :color="data.params.pro_price" :name="'color'"></ColorPicker></div>
                      </el-form-item>
                      <el-form-item label="划线价格">
                        <el-radio-group v-model="data.params.del_price.show">
                          <el-radio :label="1">显示</el-radio>
                          <el-radio :label="0">不显示</el-radio>
                        </el-radio-group>
                        <div class="input_content" v-if="data.params.del_price.show">
                          <div class="input_div">
                            <span class="label">显示文字：</span>
                            <div class="input-with-reset">
                              <el-input size="medium" placeholder="如:原价" class="" v-model="data.params.del_price.title">
                                <el-button size="medium" @click="data.params.del_price.title = ''" slot="append">重置</el-button>
                              </el-input>
                            </div>
                          </div>
                          <ColorPicker :title="'文字颜色：'" :color="data.params.del_price" :name="'color'"></ColorPicker>
                        </div>
                      </el-form-item>
                      <el-form-item label="商品销量">
                        <el-radio-group v-model="data.params.sales_num.show">
                          <el-radio :label="1">显示</el-radio>
                          <el-radio :label="0">不显示</el-radio>
                        </el-radio-group>
                        <div class="input_content" v-if="data.params.sales_num.show">
                          <div class="input_div">
                            <span class="label">显示文字：</span>
                            <div class="input-with-reset">
                              <el-input size="medium" placeholder="如:销量" class="" v-model="data.params.sales_num.title">
                                <el-button size="medium" @click="data.params.sales_num.title = ''" slot="append">重置</el-button>
                              </el-input>
                            </div>
                          </div>
                          <ColorPicker :title="'文字颜色：'" :color="data.params.sales_num" :name="'color'"></ColorPicker>
                        </div>
                      </el-form-item>
                      <el-form-item label="购买按钮">
                        <el-radio-group v-model="data.params.add_button.show">
                          <el-radio :label="true">显示</el-radio>
                          <el-radio :label="false">不显示</el-radio>
                        </el-radio-group>

                        <div class="input_content" v-if="data.params.add_button.show">
                          <el-form label-width="50px">
                            <el-form-item label="图标">
                              <div class="icon_box">
                                <span class="hasIcon" v-show="data.params.add_button.icon != ''">
                                  <i :class="data.params.add_button.icon"></i>
                                  <span class="choose_bar" @click="showiconselcet()"><i class="txt">替换</i></span>
                                </span>
                                <span class="noIcon" v-show="data.params.add_button.icon == ''">
                                  <i class="el-icon-plus" style="color: #409eff" @click="showiconselcet(item, i)"></i>
                                </span>
                              </div>
                            </el-form-item>
                            <el-form-item label="颜色"><ColorPicker :color="data.params.add_button" :name="'color'"></ColorPicker></el-form-item>
                          </el-form>
                        </div>
                      </el-form-item>
                      <el-form-item label="上间距">
                        <div class="slider_box">
                          <el-slider class="slider_item" :max="50" v-model="data.params.p_t"></el-slider>
                          <el-input-number v-model="data.params.p_t" :controls="false" :min="0" :max="50"></el-input-number>
                        </div>
                      </el-form-item>
                      <el-form-item label="下间距">
                        <div class="slider_box">
                          <el-slider class="slider_item" :max="50" v-model="data.params.p_b"></el-slider>
                          <el-input-number v-model="data.params.p_b" :controls="false" :min="0" :max="50"></el-input-number>
                        </div>
                      </el-form-item>
                      <el-form-item label="左右间距">
                        <div class="slider_box">
                          <el-slider class="slider_item" :max="50" v-model="data.params.p_lr"></el-slider>
                          <el-input-number v-model="data.params.p_lr" :controls="false" :min="0" :max="50"></el-input-number>
                        </div>
                      </el-form-item>
                      <el-form-item label="上边角">
                        <div class="slider_box">
                          <el-slider class="slider_item" :max="50" v-model="data.params.r_t"></el-slider>
                          <el-input-number v-model="data.params.r_t" :controls="false" :min="0" :max="50"></el-input-number>
                        </div>
                      </el-form-item>
                      <el-form-item label="下边角">
                        <div class="slider_box">
                          <el-slider class="slider_item" :max="50" v-model="data.params.r_b"></el-slider>
                          <el-input-number v-model="data.params.r_b" :controls="false" :min="0" :max="50"></el-input-number>
                        </div>
                      </el-form-item>
                    </el-form>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </template>
          </el-form>
        </div>
        <div class="foot_btns"><el-button type="primary" @click="save">保存数据</el-button></div>

        <el-dialog title="选择商品" :visible.sync="showSelectPro" width="50%" append-to-body>
          <SelectProduct v-if="data.params" :key="rk" :data="selectPro" :limit="data.params.limit" @outData="closePro"></SelectProduct>
        </el-dialog>
        <el-dialog title="图标选择器" :visible.sync="iconshow" append-to-body width="960px"><SelectIcon @changeIcon="changeIcon"></SelectIcon></el-dialog>
        <el-dialog title="选择分类" :visible.sync="showSelectCate" width="40%" append-to-body>
          <SelectCategory v-if="data.params" :key="rk" :limit="data.params.limit" :cate="data.params.cateid" @outData="closeCate"></SelectCategory>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
// 引入拖拽组件
import draggable from 'vuedraggable';
import guesslike from '@/components/guessLike/index';
import ColorPicker from '@/components/ColorPicker/index';
import SelectProduct from '@/components/SelectProduct/index';
import SelectCategory from '@/components/SelectCategory/index';
import SelectIcon from '@/components/SelectIcon/index';
import {getProList} from '@/api/shop/dndlist';
import {savePickConfig, getPickConfig, getGrounding} from '@/api/mall/guesslike';
export default {
  name: 'demo',
  components: {
    draggable,
    ColorPicker,
    guesslike,
    SelectCategory,
    SelectProduct,
    SelectIcon
  },
  data() {
    return {
      showSelectPro: false,
      showSelectCate: false,
      linkdata: {},
      tab_num: 0,
      iconshow: false,
      activeNames: [0, 1, 2],
      list: [],
      dragOptions: {
        filter: '.disabled'
      },
      hideline: false,
      obj: {
        checkedCities: []
      },
      is_open: 1,
      btnlist: [
        {
          name: '标签',
          icon: 'el-sc-tupian5',
          template_type: 'titleBar',
          only: true,
          params: {
            title: '您或许会喜欢',
            bar_color: '#333',
            titleBarType: 0,
            icon: 'el-icon-arrow-right'
          }
        },
        {
          name: '商品组',
          icon: 'el-sc-tupian5',
          template_type: 'shangpinzu',
          only: true,
          params: {
            list: [],
            recommend_type: 1,
            type: 0,
            cateid: 0,
            show_type: 'block',
            list_type: 'two',
            bg: '#FFFFFF',
            t_color: '#000000',
            limit: 20,
            p_t: 8,
            p_lr: 12,
            p_b: 8,
            r_t: 0,
            r_b: 0,
            order: 'comprehensive',
            pro_price: {
              show: 1,
              color: '#FF3C29'
            },
            del_price: {
              show: 0,
              color: '#969696',
              title: ''
            },
            sales_num: {
              show: 0,
              color: '#969696',
              title: ''
            },
            add_button: {
              show: false,
              icon: 'el-sc-gouwuche2',
              color: '#F56C6C'
            }
          }
        }
      ],
      template_type: '',
      activeNames: ['1', '2', '3'],
      selectPro: [],
      rk: 0,
      data: {},

      checkAll: false,
      cities: [
        {
          label: '商品详情页',
          value: '1'
        },
        {
          label: '订单详情',
          value: '2'
        },
        {
          label: '支付成功',
          value: '3'
        },
        {
          label: '个人中心',
          value: '4'
        },
        {
          label: '积分明细',
          value: '5'
        },
        {
          label: '我的收藏',
          value: '6'
        },
        {
          label: '余额明细',
          value: '7'
        },
        {
          label: '全部订单',
          value: 'o0'
        },
        {
          label: '待支付',
          value: 'o1'
        },
        {
          label: '待发货',
          value: 'o2'
        },
        {
          label: '待收货',
          value: 'o3'
        },
        {
          label: '待核销',
          value: 'o4'
        },
        {
          label: '待评价',
          value: 'o5'
        },
        {
          label: '已完结',
          value: 'o6'
        },
        {
          label: '会员中心',
          value: '8'
        }
      ],
      isIndeterminate: true,

      drawer: false,
      linkdata: {},
      rules: {
        checkedCities: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个页面显示',
            trigger: 'change'
          }
        ]
      },
      icon_type: 1
    };
  },
  mounted() {
    this.getData();
    //this.getTypeData();
  },
  methods: {
    showiconselcet(data) {
      this.icon_type = 1;
      this.iconshow = true;
    },
    // changeIcon(data) {
    //   this.iconshow = false;
    //   data.params.add_button.icon=data
    //   // this.$refs.controls.geticon(data);
    // },
    getData() {
      getPickConfig().then(res => {
        let data = JSON.parse(res.msg);
        this.list = data.label;
        data.showPage.forEach(a => {
          this.obj.checkedCities.push(a);
        });
        this.is_open = Number(data.is_open);
        if (data.showPage.length < this.cities.length && data.showPage.length > 0) {
          this.isIndeterminate = true;
        } else {
          this.isIndeterminate = false;
          if (data.showPage.length == 0) {
            this.checkAll = false;
          } else {
            this.checkAll = true;
          }
        }
        //  = data.showPage;

        if (this.list.length <= 0) {
          this.btnlist.forEach(item => {
            this.list.push(item);
          });
        }
      });
    },
    getTypeData() {
      let data = {
        page: 1,
        size: 10,
        type: 1
      };
      getGrounding(data).then(res => {
        console.log(res);
      });
    },
    delhandle(i) {
      this.list.splice(i, 1);
      this.handleChange(0);
    },
    handleChange(i) {
      if (this.list.length == 0) {
        this.data = {};
        return false;
      }
      this.list.forEach(a => {
        a.active = false;
      });

      this.list[i].active = true;
      this.data = this.list[i];
    },
    addfroms(data) {
      let val = data.name;
      this.list.forEach(a => {
        a.active = false;
      });
      //唯一组件判断
      if (data.only) {
        let list = this.list;
        let i = list.findIndex(x => x.name === val);
        if (i > -1) {
          //已存在
          this.$message.error('此元素最多存在一个');
        } else {
          var data = JSON.parse(JSON.stringify(data));
          data.active = true;
          this.list.push(data);
          this.data = data;
        }
      }
    },
    selectlink(data, i) {
      this.drawer = true;
      this.tab_num = i;
      this.linkdata = data;
    },
    chooseIcon() {
      this.icon_type = 2;
      this.iconshow = true;
    },
    removeIcon() {
      this.data.params.icon = '';
    },
    changeIcon(data) {
      this.iconshow = false;
      if (this.icon_type == 1) {
        this.data.params.add_button.icon = data;
      } else if (this.icon_type == 2) {
        this.data.params.icon = data;
      }
    },
    save() {
      let _this = this;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let goods = [];
          _this.list.forEach(item => {
            if (item.template_type == 'shangpinzu') {
              item.params.list.forEach(itemr => {
                goods.push(itemr.id);
              });
            }
          });
          let data = {
            content: JSON.stringify({
              label: _this.list,
              showPage: _this.obj.checkedCities,
              is_open: _this.is_open,
              goods
            })
          };
          savePickConfig(data).then(res => {
            _this.$message.success('保存成功');
            // _this.getData();
          });
        }
      });
    },
    //切换标签商品数据源标签
    changeLimit(item) {
      let s = this.data.params.limit,
        sl = this.data.list;

      try {
        if (sl.length > 0) {
          sl.forEach(e => {
            e.show = false;
          });

          sl.forEach((e, i) => {
            e.show = true;
            if (i == s - 1) {
              throw new Error('end');
            }
          });
        }
      } catch (error) {}
    },
    //添加商品
    addPro() {
      this.selectPro = this.data.params.list;
      this.rk++;
      this.showSelectPro = true;
    },
    //选择分类
    addCate() {
      this.showSelectCate = true;
      this.rk++;
    },
    //关闭选择产品框
    closePro(data) {
      if (data) {
        this.data.params.list = data;
      }
      this.showSelectPro = false;
    },
    //关闭选择分类框
    closeCate(data) {
      this.showSelectCate = false;

      if (data.c_id) {
        this.data.params.cateid = Number(data.id);

        getProList({classify_id: data.c_id}, 1, this.data.params.limit).then(res => {
          this.data.params.list = res.msg.data;
        });
      }
    },
    removePro(i) {
      this.data.params.list.splice(i, 1);
    },
    //
    handleCheckAllChange(val) {
      if (val) {
        let list = [];
        this.cities.forEach(a => {
          list.push(a.value);
        });
        this.obj.checkedCities = list;
      } else {
        this.obj.checkedCities = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
};
</script>

<style>
.input_content {
  margin-top: 10px;
  background: #f4f6f8;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 20px;
}

.input_content .el-color-picker__trigger {
  width: 70px;
}

.input_div {
  display: flex;
  margin-bottom: 10px;
}

.component-setter .el-card__body {
  height: calc(100vh - 125px);
  overflow-y: auto;
}

.selectlink .el-dialog__body {
  padding-bottom: 0;
}
</style>
<style scoped lang="scss">
.app {
  width: 640px;
  margin: 0 auto;
  height: 800px;
  overflow: scroll;
}

.dn-container {
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
}

.main_body {
  width: 100%;
  min-width: 1300px;
  box-sizing: border-box;
  padding-left: 340px;
  padding-right: 460px;
  display: flex;
  position: relative;
  background: #f4f6f8;
  justify-content: center;
  overflow: hidden;
  // height: 100%;
  height: calc(100vh - 70px);
  .main_left {
    position: absolute;
    width: 340px;
    // height: 100%;
    left: 0;
    top: 0;
    bottom: 22px;
    z-index: 0;
    background: #ffffff;
    padding: 20px;
    overflow-y: auto;

    .btn_group {
      display: flex;
      flex-wrap: wrap;
      .btn_item {
        position: relative;
        margin: 5px;
        width: 82px;
        height: 82px;
        box-sizing: border-box;
        padding: 0;
        background: #f4f6f8;
        border-radius: 2px;
        border: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        i {
          color: #2d8cf0;
          font-size: 25px;
          margin-bottom: 6px;
        }
      }
    }
  }
  .phone-area {
    // height: 100%;
    // min-width: 496px;
    width: 434px;
    height: 828px;
    // flex: 1;

    box-sizing: border-box;
    margin-right: -10px;
    margin-left: -10px;
    background: url(../../../assets/images/ipbg.png) no-repeat;
    .scroll-body {
      overflow-y: auto;
      height: fit-content;
      width: 375px;
      height: 667px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      border-radius: 2px;
      box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
      margin: 69px auto 0 auto;
      // position: relative;
      // left: -1px;
      &::-webkit-scrollbar {
        display: none !important; /* Chrome Safari */
      }
      .page-content {
        min-height: 100%;
        width: 375px;

        .diy-phone {
          width: 375px;
          height: auto;
          min-height: 100%;
          background: #fff;

          .phone-body {
            background: #f3f3f3;
            .phone-main {
              min-height: 667px;
              box-sizing: border-box;
              border-top: 0;
              user-select: none;
              position: relative;
              display: flex;
              flex-direction: column;
            }
            .phone-title {
              height: 64px;
              background: #fff;
              background-size: 100% auto;
              text-align: center;
              cursor: pointer;
              display: block;
              white-space: nowrap;
              text-overflow: ellipsis;
              position: relative;
              &.pageInfo {
                box-shadow: 0 0 2px 0 #2d8cf0;
                z-index: 1000;
                position: relative;
              }
              .page-title {
                position: absolute;
                z-index: 100;
                font-family: PingFang SC;
                font-style: normal;
                font-weight: 600;
                font-size: 18px;
                line-height: 25px;
                display: flex;
                align-items: center;
                text-align: center;
                color: #212121;
                left: 50%;
                transform: translate(-50%, 0);
                bottom: 10px;
                margin: 0;
              }

              .phone-top {
                display: flex;
                flex-direction: column;
                width: 375px;
                overflow: hidden;

                .custom-navbar img {
                  position: absolute;
                  right: 7px;
                  width: 87px;
                  height: 32px;
                  bottom: 6px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.phone-area::-webkit-scrollbar {
  display: none;
}

.component-setter {
  transform: translateX(0);
  position: absolute;
  width: 520px;
  height: calc(100vh - 130px);
  right: 0;
  top: 0;
  background: #ffffff;
  border: 1px solid #e9edef;
  box-sizing: border-box;
  border-radius: 2px;
  .setter-body {
    height: calc(100% - 80px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .header {
    width: 100%;
    height: 60px;
    background: #f4f6f8;
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-bottom: 20px;
  }
  .title {
    margin-left: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &::before {
      content: '';
      width: 4px;
      height: 18px;
      background: #4d6ef2;
      border-radius: 2px;
      margin-right: 8px;
    }
  }
}
.bottom-items {
  display: flex;
  position: absolute;
  bottom: 0;
  .btn_items {
    flex: 1;
    position: relative;
    .btn_text {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 6px 0 4px 0;
      .text {
        font-size: 12px;
      }
      .icon-box {
        height: 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 6px;
        position: relative;
        i {
          font-size: 26px;
          text-align: center;
          display: block;
        }
      }
    }
    .btn_icon {
      position: absolute;
      top: -2px;
      right: -9px;

      width: 18px;
      height: 18px;
      border-radius: 50%;
      text-align: center;
      font-size: 12px;
      line-height: 18px;
      color: #fff;
    }
    // display: flex;
  }
}
.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}

.select_link {
  background: #fff;

  .select_btn {
    height: 36px;
    line-height: 28px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #2d8cf0;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      border-color: #2d8cf0;
    }
  }
}
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}

.drag-item {
  color: #000;
  // border: 1px solid red;
  width: 100%;
  // height: 300px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.drag-item::before,
.drag-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  z-index: 100;
}

.drag-item::before {
  top: 0;
}

.drag-item::after {
  bottom: 0;
}

.drag-item .border {
  height: 100%;
  width: 0;
  position: absolute;
  top: 0;
  z-index: 10;
}

.drag-item:hover {
  .border {
    border-left: 1px dashed #2d8cf0;
  }

  &::before {
    border-top: 1px dashed #2d8cf0;
  }

  &::after {
    border-top: 1px dashed #2d8cf0;
  }

  .del {
    display: block;
  }
}

.drag-item .left-border {
  left: 0;
}

.drag-item .right-border {
  right: 0;
}

.active-item .border {
  border-left: 1px solid #2d8cf0 !important;
}

.drag-item .del {
  position: absolute;
  width: 40px;
  height: 20px;
  right: 40px;
  top: 0;
  background: #ff1f2c;
  border-radius: 0px 0px 2px 2px;
  text-align: center;
  line-height: 18px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  z-index: 1000;
  display: none;
  transform: translate(100%, 0);
}

.active-item .del {
  display: block;
}

.active-item::before,
.active-item::after {
  border-top: 1px solid #2d8cf0 !important;
}
.foot_btns {
  width: 100%;
  position: absolute;
  bottom: 20px;
  border-top: 1px solid #c0c4cc;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  // padding-left: 40px;
}
.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  margin-bottom: 22px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .price {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;

      // &:last-child{
      //   border-bottom: none;
      // }

      &.addPro {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-bottom: none;
      }

      .dragIcon {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 16px;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .price {
        width: 80px;
        text-align: center;
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}
</style>
